<!--
 * @Author: gaojinyu 1593026814@qq.com
 * @Date: 2023-12-19 09:13:52
 * @LastEditors: gaojinyu 1593026814@qq.com
 * @LastEditTime: 2024-01-03 16:00:31
 * @FilePath: \test\src\components\BussComponents\MeetLearnComp.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <BoxTitleInCenter title="三会一课">
    <template #body>
      <div class="box">
        <div class="grid_item" v-for="item in data" >
          <div class="time">{{ item.time }}</div>
          <div class="con">
            <div class="name">
              <span>{{ item.name }}</span>
              <span class="more" v-show="item.name == '党课'" @click="itemClick(item)"> 去学习 >> </span>
            </div>
            <div class="who">{{ item.who }}</div>
            <span></span>
          </div>
        </div>
      </div>
      <el-dialog
        v-model="centerDialogVisible"
        title=""
        :fullscreen="true"
        align-center
      >
        <template #footer>
          <iframe :src="`${url}`" frameborder="0"></iframe>
        </template>
      </el-dialog>
    </template>
  </BoxTitleInCenter>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { getSid, getUrl } from "@/api/api.js";
let centerDialogVisible = ref(false);
let sid = ref("");
let url = ref("");
let data = reactive([
  {
    time: "每季",
    name: "支部党员大会",
    who: "党支部书记主持",
  },
  {
    time: "每月",
    name: "党支部党员会",
    who: "党支部书记主持",
  },
  {
    time: "每月",
    name: "党小组会",
    who: "党小组长主持",
  },
  {
    time: "每年",
    name: "党课",
    who: "各支部负责实施",
  },
]);
function itemClick(item) {
  if (item.name == "党课") {
    centerDialogVisible.value = true;
    getSidData();
    getUrlData();
  }
}
// 获取sid
async function getSidData() {
  let data = {
    key: "J6LXzOXsyonz3umvD33zECREcrRX88Rv",
    userName: "qr7Mu2I+sAR19TLRlU4Taw==",
    phone: "XAmC/87ls6obrIxtLNEyYQ==",
    appName: "辽宁移动智慧社区党建",
  };
  let res = await getSid(data);
  console.log(res.data.data.sid, "sid结果");
  sid.value = res.data.data.sid;
}
// 获取url
async function getUrlData() {
  let data = {
    sign: "J6LXzOXsyonz3umvD33zECREcrRX88Rv",
    userName: "qr7Mu2I+sAR19TLRlU4Taw==",
    phone: "XAmC/87ls6obrIxtLNEyYQ==",
    appName: "辽宁移动智慧社区党建",
    terminalType: "tv",
    backTrackType: "0",
    backTrackUrl: "111111111111111",
  };
  let res = await getUrl(data);
  console.log(res.data.data, "url结果");
  url.value = res.data.data;
}
onMounted(() => {});
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(2, 50%);
  grid-template-columns: repeat(2, 50%);

  .grid_item {
    place-self: center;
    width: 400px;
    height: 123px;
    // height: 40px;
    // overflow-y: scroll;
    background: #012739;
    border: 2px solid #08606c;
    @include display(flex-start, center, row);
    

    .time {
      @include display(center, center, row);
      width: 60px;
      height: 106px;
      background: url(~@/assets/images/bg1.png);
      font-size: 32px;
      text-align: center;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      color: #ffffff;
      margin-left: 16px;
    }
    .con {
      color: #ffffff;
      font-family: Microsoft YaHei, Microsoft YaHei-Light;
      margin-left: 36px;

      .name {
        font-size: 36px;
        font-weight: 700;
        @include display(space-between, flex-start, row);
        .more {
          color: #6262e1;
          font-size: 20px;
          margin-left: 110px;
          font-weight: 400;
          cursor: pointer;
        }
        .more:hover {
          color: #08606c;
        }
      }
      .who {
        font-size: 24px;
        margin-top: 14px;
        // font-weight: bold;
      }
    }
  }
}
::v-deep .el-overlay {
  .el-dialog {
    background: #111724 !important;
    @include display(flex-start, center, column);
    .el-dialog__footer {
      width: 100%;
      height: 0;
      flex-grow: 1 !important;
      display: flex;
      justify-content: center;
    }

    .el-dialog__close {
      color: #fff !important;
      font-weight: bold;
      font-size: 50px;
      right: 30px;
    }
  }
}

iframe {
  margin: auto;
  width: 100%;
  padding: 0 20%;
  height: 100%;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 6px;
  // background-color: #008A8F;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #6FF5FF;
}

// 火狐滚动条样式
* {
  scrollbar-color: #6FF5FF  transparent; /* 滑块颜色  滚动条背景颜色 */
  scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */
}
</style>
